<!--饼图-->
<template>

</template>

<script>
export default {
  name: "my-pie",
  mounted() {
    //要数据
    this.$http.post("http://localhost:9000/money/selectPlayId", {
      userId: sessionStorage.getItem("token")
    }).then((res) => {
      console.log(res);
      this.drawLine(res.data[0], res.data[1], res.data[2], res.data[3]);
    }).catch(() => {
      console.log("查询失败")
    })
  },
  methods: {
    drawLine(date1, date2, date3, date4) {
      let myChart;
      myChart = this.$echarts.getInstanceByDom(document.getElementById('myChart'))
      if (myChart == null) {
        myChart = this.$echarts.init(document.getElementById('myChart'))
      }
      myChart.clear();
      // 绘制图表
      myChart.setOption({
        title: {
          text: '消费类型次数汇总'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: '总次数',
            type: 'pie',
            radius: [25, 125],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 8
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {value: date1, name: '餐饮'},
              {value: date2, name: '娱乐'},
              {value: date3, name: '投资'},
              {value: date4, name: '其他'},
            ]
          }
        ]
      });
    }
  }
}
</script>

<style scoped>

</style>
